<template>
  <div
    style="
      overflow: hidden;
      width: 100%;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      background-color: #f0f0f0;
    "
  >
    <n-card title="渐变堆叠面积图" style="color:white" hoverable> <lineChart></lineChart> </n-card>
    <n-card title="阶段速度仪表盘" hoverable> <gaugeChart></gaugeChart> </n-card>
    <n-card title="极坐标双数值轴" hoverable> <polarChart></polarChart> </n-card>
    <n-card title="涟漪特效散点图" hoverable> <effectScatterChart/> </n-card>
    <n-card title="饼图" hoverable> <pieChart></pieChart> </n-card>
    <n-card title="堆叠条形图" hoverable> <newbar></newbar> </n-card>
    <n-card title="基础南丁格尔玫瑰图" hoverable> <nightingaleChart></nightingaleChart> </n-card>
    <n-card title="基础雷达图" hoverable> <radarChart></radarChart> </n-card>
  </div>
</template>

<script setup>
import lineChart from "../../components/lineChart.vue";
import gaugeChart from "../../components/gaugeChart.vue";
import polarChart from "../../components/polarChart.vue";
import effectScatterChart from "../../components/effectScatterChart.vue";
import pieChart from "../../components/pieChart.vue";
import newbar from "../../components/barChart.vue";
import radarChart from "../../components/radarChart.vue";
import nightingaleChart from "../../components/nightingaleChart.vue";
</script>

<style lang="less" scoped>
.n-card {
  max-width: 500px;
  margin: 10px auto;
//   background-color: #283441;
}
</style>
